<template>
	<view class="container">
		<view class="top">
			<image class="tiaozhuan" src="../../../static/images/ljh/jt.png" @click="returnButton()"></image>
			<view class="title">应急救援</view>
		</view>
		<view class="dt">
			<uni-card>
				<map name=""></map>
			</uni-card>


			<uni-card>
				<view class="tabs">
					<view :class="['tab', activeTab === '搭电' ? 'active' : '']" @click="changeTab('搭电')">搭电</view>
					<view :class="['tab', activeTab === '换胎' ? 'active' : '']" @click="changeTab('换胎')">换胎</view>
					<view :class="['tab', activeTab === '拖车' ? 'active' : '']" @click="changeTab('拖车')">拖车</view>
				</view>

				<view class="form" v-if="activeTab=='拖车'">
					<view class="form-item">
						<text class="label">起点</text>
						<input class="input" placeholder="河南省焦作市山阳区32号" />
					</view>

					<view class="form-item">
						<text class="label">终点</text>
						<input class="input" placeholder="山阳区解放路66号" />
					</view>

					<view class="form-item">
						<text class="label">求助人</text>
						<input class="input" placeholder="张先生" />
					</view>

					<view class="form-item">
						<text class="label">联系方式</text>
						<input class="input" placeholder="15523632541" />
					</view>

					<view class="form-item">
						<text class="label">车牌</text>
						<input class="input" placeholder="豫CJ4321" />
					</view>

					<view class="form-item">
						<text class="label">描述</text>
						<textarea class="textarea" placeholder="请准确描述当前的状况及所需的帮助"></textarea>
					</view>

					<button class="submit-button">呼叫救援</button>
					<view class="history" @click="returnButton()">救援记录 ></view>
				</view>
				<view class="form" v-if="activeTab=='搭电'">
					<view class="form-item">
						<text class="label">位置</text>
						<input class="input" placeholder="河南省焦作市山阳区32号" />
					</view>
					<view class="form-item">
						<text class="label">求助人</text>
						<input class="input" placeholder="张先生" />
					</view>

					<view class="form-item">
						<text class="label">联系方式</text>
						<input class="input" placeholder="15523632541" />
					</view>

					<view class="form-item">
						<text class="label">车牌</text>
						<input class="input" placeholder="豫CJ4321" />
					</view>

					<view class="form-item">
						<text class="label">描述</text>
						<textarea class="textarea" placeholder="请准确描述当前的状况及所需的帮助"></textarea>
					</view>

					<button class="submit-button">呼叫救援</button>
					<view class="history" @click="returnButton()">救援记录 ></view>
				</view>
			</uni-card>
			<uni-card title="警务救援">
				<view class="jwjy">
					<view class="jwjyitem">
						<image src="../../../static/images/ljh/jtsg.png"></image>
						<view>交通事故</view>
						<view>122</view>
					</view>
					<view class="jwjyitem">
						<image src="../../../static/images/ljh/hj.png"></image>
						<view>火警</view>
						<view>119</view>
					</view>
					<view class="jwjyitem">
						<image src="../../../static/images/ljh/jjb.png"></image>
						<view>急救中心</view>
						<view>120</view>
					</view>
					<view class="jwjyitem">
						<image src="../../../static/images/ljh/jc.png"></image>
						<view>公安报警</view>
						<view>110</view>
					</view>
				</view>
			</uni-card>
		</view>
	</view>
</template>

<script>
	export default {
		data() {

			return {
				activeTab: '拖车',
			};
		},
		methods: {
			changeTab(tab) {
				this.activeTab = tab;
				console.log(this.activeTab)
			},
			returnButton() {
				uni.$u.route('/pages/ljh/SaveRecord/SaveRecord')
			}
		},
	};
</script>

<style>
	.tiaozhuan {
		position: absolute;
		color: white;
		font-size: 50rpx;
		top: 50rpx;
		left: 20rpx;
		width: 50rpx;
		height: 50rpx;
	}

	.jwjy {
		display: flex;
		justify-content: space-around;
	}

	.jwjyitem {
		width: 120rpx;
		text-align: center;
	}

	.jwjyitem image {
		width: 80rpx;
		height: 80rpx;
	}

	.dt {
		position: absolute;
		top: 150rpx;
	}

	.top {
		width: 100%;
		height: 450rpx;
		background-image: url(@/static/images/ljh/tc1.png);
	}

	.title {
		width: 100%;
		color: white;
		text-align: center;
		padding: 50rpx 0rpx;
		font-size: 35rpx;
	}

	.container {
		/* padding: 20px; */
		background-color: #f9f9f9;
		height: 100vh;
	}

	.tabs {
		display: flex;
		justify-content: space-around;
		margin-bottom: 20px;
	}

	.tab {
		padding: 10px 20px;
		font-size: 16px;
		color: #333;
		border-bottom: 2px solid transparent;
		cursor: pointer;
	}

	.tab.active {
		color: #007aff;
		border-bottom: 2px solid #007aff;
	}

	.form {
		background-color: #fff;
		padding: 20px;
		border-radius: 8px;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	}

	.form-item {
		margin-bottom: 15px;
	}

	.label {
		font-size: 14px;
		margin-bottom: 5px;
		display: block;
		color: #666;
	}

	.input,
	.textarea {
		width: 100%;
		padding: 10px;
		font-size: 14px;
		border: 1px solid #ddd;
		border-radius: 4px;
		background-color: #f9f9f9;
	}

	.textarea {
		min-height: 80px;
	}

	.submit-button {
		width: 100%;
		height: 100rpx;
		padding: 15px;
		font-size: 16px;
		color: #fff;
		background-color: #ff6f00;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		text-align: center;
	}

	.history {
		margin-top: 10px;
		font-size: 14px;
		color: #007aff;
		text-align: center;
		cursor: pointer;
	}
</style>